<template>
  <nav class="bottom-nav" v-if="isMobile">
    <router-link v-for="item in navItems" :key="item.path" :to="item.path" class="nav-item" :class="{active: $route.path.startsWith(item.path)}">
      <span class="icon">{{ item.icon }}</span>
      <span class="label">{{ item.label }}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  name: 'BottomNav',
  data() {
    return {
      navItems: [
        { label: '首页', path: '/', icon: '🏠' },
        { label: '购物车', path: '/cart', icon: '🛒' },
        { label: '订单', path: '/orders', icon: '📄' },
        { label: '我的地址', path: '/address', icon: '📍' },
        { label: '个人中心', path: '/profile', icon: '👤' },
      ]
    };
  },
  computed: {
    isMobile() {
      // 简单判断移动端
      return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
    }
  }
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}
.nav-item {
  flex: 1;
  text-align: center;
  color: #888;
  text-decoration: none;
  font-size: 12px;
  padding-top: 4px;
}
.nav-item .icon {
  display: block;
  font-size: 22px;
  margin-bottom: 2px;
}
.nav-item.active {
  color: #409eff;
}
</style> 